<template>
  <div class="h-naive-table-box">
    <div class="h-naive-table-top">
      <n-input v-model:value="value" type="text" placeholder="请输入查询字段..." />
      <n-button type="info">
        查询
      </n-button>
    </div>
    <div class="h-naive-table-bottom">
      <n-button type="info" @click="showModal = true">
        新增数据
      </n-button>
      <n-modal v-model:show="showModal" class="custom-card" preset="card" style="width:600px" title="新增数据" size="huge"
        :bordered="false" :segmented="segmented">

        <!-- 有可优化之处 -->
        <n-form ref="formRef" :label-width="80" :model="formValue" :rules="rules" :size="size">
          <n-form-item label="姓名" path="user.name">
            <n-input v-model:value="formValue.user.name" placeholder="输入姓名" />
          </n-form-item>
          <n-form-item label="年龄" path="user.age">
            <n-input v-model:value="formValue.user.age" placeholder="输入年龄" />
          </n-form-item>
          <n-form-item label="电话号码" path="phone">
            <n-input v-model:value="formValue.phone" placeholder="电话号码" />
          </n-form-item>
        </n-form>
        <!-- 有可优化之处结束 -->

        <template #footer>
          <n-button type="info">
            添加
          </n-button>
        </template>
      </n-modal>

      <n-data-table size="small" :columns="columns" :data="data" :pagination="pagination" />
    </div>
  </div>

</template>

<script setup>
import { h, reactive, ref } from "vue";
import { NTag, NButton, useMessage } from "naive-ui";

let props = defineProps(["dataColumns", "datas"]);

let data = ref()
let columns = ref()
let pagination = ref()


function createColumns({
  sendMail
}) {
  return [
    {
      title: "Name",
      key: "name"
    },
    {
      title: "Age",
      key: "age"
    },
    {
      title: "Address",
      key: "address"
    },
    {
      title: "Tags",
      key: "tags",
      render(row) {
        const tags = row.tags.map((tagKey) => {
          return h(
            NTag,
            {
              style: {
                marginRight: "6px"
              },
              type: "info",
              bordered: false
            },
            {
              default: () => tagKey
            }
          );
        });
        return tags;
      }
    },
    {
      title: "Action",
      key: "actions",
      render(row) {
        return h(
          NButton,
          {
            size: "small",
            onClick: () => sendMail(row)
          },
          { default: () => "Send Email" }
        );
      }
    }
  ];
}

function createData() {
  return [
    {
      key: 0,
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"]
    },
    {
      key: 1,
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["wow"]
    },
    {
      key: 2,
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"]
    }
  ];
}

export default defineComponent({
  setup() {
    const message = useMessage();
    return {
      data: createData(),
      columns: createColumns({
        sendMail(rowData) {
          message.info(`send mail to ${rowData.name}`);
        }
      }),
      pagination: {
        pageSize: 10
      }
    };
  }
});










// let actionCloumn = {
//   title: "操作",
//   key: "actions"
// };

// let createColumns = ({ sendMail }, columns, actionColumn) => {
//   // 修改为直接使用传入的sendMail函数，而不是重新定义
//   actionColumn.render = (row) => {
//     return [
//       h(
//         NButton,
//         {
//           size: "small",
//           style: {
//             marginRight: "10px",
//             marginBottom: "10px",
//           },
//           onClick: () => sendMail(row), // 直接调用传入的sendMail
//         },
//         { default: () => "编辑" }
//       ),
//       h(
//         NButton,
//         {
//           size: "small",
//           type: "error",
//           onClick: () => sendMail(row), // 同样直接调用传入的sendMail
//         },
//         { default: () => "删除" }
//       ),
//     ];
//   };

//   // 将actionColumn加入到columns数组
//   columns.push(actionColumn);
//   return columns;
// };

// const createData = () => [
//   {
//     key: 0,
//     name: "John Brown",
//     age: 32,
//     address: "New York No. 1 Lake Park",
//     tags: ["nice", "developer"],
//   },
//   {
//     key: 1,
//     name: "Jim Green",
//     age: 42,
//     address: "London No. 1 Lake Park",
//     tags: ["wow"],
//   },
//   {
//     key: 2,
//     name: "Joe Black",
//     age: 32,
//     address: "Sidney No. 1 Lake Park",
//     tags: ["cool", "teacher"],
//   }
// ];

// let message = useMessage();

// let data = ref(createData());

// let columns = ref(

// );

// columns.value = createColumns(
//   {
//     sendMail(rowData) {
//       message.info("send mail to " + rowData);
//     },
//   },
//   props.dataColumns,
//   actionCloumn
// )

// let pagination = reactive({
//   pageSize: 10,
// });

// let value = ref()
// let showModal = ref(false)
// let segmented = reactive({
//   content: "soft",
//   footer: "soft"
// })

// let formValue = ref({
//   user: {
//     name: "",
//     age: ""
//   },
//   phone: ""
// })

/**
 * 方法区域
 */
function handleButtonClick() {

}
</script>

<style scoped>
@import url("@/styles/NavCss/TableNav.css");
</style>
